<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./js/template.js"></script>
    <title>django增删改查</title>
</head>
<body>
<!--增删改查-->
<div class="main-view">
    <div id="content"></div>
    <script id="test" type="text/html">
        <table border=1px width=100% align=center>
            <tr bgcolor="#abcdef">
                <th>学号</th>
                <th>姓名</th>
                <th>家庭住址</th>
                <th>联系方式</th>
            </tr>
            {{each}}
            <tr align=center>
                <td>{{$value.pk}}</td>
                <td>{{$value.name}}</td>
                <td>{{$value.address}}</td>
                <td>{{$value.phone}}</td>
            </tr>
            {{/each}}
        </table>
    </script>

    <div class="msg-create-view" style="margin-top: 40px" align=center>
        <h4>添加新学生</h4>
        <form action="">
            学生姓名: <input type="text" id="name"><br>
            家庭住址: <input type="text" id="address"><br>
            联系方式: <input type="text" id="phone"><br>
        </form>
        <button id='save' style="margin-top: 10px">保存</button>
    </div>
</div>


<!--增删改查-->
<script type="text/javascript">
    window.onload=function(){

        getInfo();

        $("#save").click(function(){
            name = $("#name").val();
            address = $("#address").val();
            phone = $("#phone").val();
            if (name && address && phone) {
                addInfo(name, address, phone);
            } else {
                alert("信息不全");
            }
        });
    }

    function getInfo() {
        $.ajax({
            type: 'get',
            url: 'http://106.15.196.50:9999/info/info/',
            timeout: 6000,
            dataType: 'json',
            success: function(json){
                console.log(json.items);
                var html = template('test', json.items);
                document.getElementById('content').innerHTML = html;
            }
        });
    }

    function addInfo(name, address, phone) {
        $.ajax({
            type: 'post',
            url: 'http://106.15.196.50:9999/info/info/add/',
            timeout: 6000,
            data: {
                name: name,
                address: address,
                phone: phone
            },
            dataType: 'json',
            success: function(json){
                console.log(json);
                if (json.result == 'ok') {
                    alert("添加成功");
                    getInfo();
                }
            },
            error: function(xhr, textStatus){
            }
        })
    }
</script>
</body>
</html>